<template>
    <div class="main">
        <div class="panel set fbc">
            <div class="left_layout">
                <div class="fontSet">
                    <div class="title">打印字体设置</div>
                    <div class="content ">
                        <div class="item fbc" v-for="(item, index) in state.fontSet" :key="index">
                            <div class="subItem">
                                <span>{{ item.title }}</span>
                            </div>
                            <div class="subItem fbc">
                                <span class="lable">字体</span>
                                <el-select  v-model="item.fontFamily" placeholder="请选择字体">
                                    <el-option :label="item.label" :value="item.value" v-for="item in options1" />
                                </el-select>
                            </div>
                            <div class="subItem fbc">
                                <span class="lable">字号</span>
                                <el-select v-model="item.fontSize" placeholder="请选择字号">
                                    <el-option :label="item.label" :value="item.value" v-for="item in options2" />
                                </el-select>
                            </div>
                            <div class="subItem fbc">
                                <span class="lable">对齐方式</span>
                                <el-select v-model="item.fontAlign" placeholder="请选择对齐方式">
                                    <el-option :label="item.label" :value="item.value" v-for="item in options3" />
                                </el-select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="titleSet">
                    <div class="title">标题栏设置</div>
                    <div class="content fbc">
                        <span class="lable">表格名称</span>
                        <el-input v-model="state.titleSet"></el-input>

                    </div>
                </div>
            </div>

            <div class="right_layout">
                <div class="pageSet">
                    <div class="title">页面设置</div>
                    <div class="content ">
                        <div class="item">

                            <div class="subItem ">
                                <span class="lable">纸张类型</span>
                                <el-select v-model="state.pageSet.type" placeholder="请选择纸张类型">
                                    <el-option :label="item.label" :value="item.label" v-for="item in options4" />
                                </el-select>
                            </div>
                        </div>

                        <div class="item fbc page_padding">
                            <div class="subItem fbc">
                                <span class="lable">上边距</span>
                                <el-input v-model="state.pageSet.top" @change="topNumberCheck"></el-input>
                            </div>
                            <div class="subItem fbc">
                                <span class="lable">下边距</span>
                                <el-input v-model="state.pageSet.bottom" @change="bottomNumberCheck"></el-input>
                            </div>
                            <div class="subItem fbc">
                                <span class="lable">左边距</span>
                                <el-input v-model="state.pageSet.left" @change="leftNumberCheck"></el-input>
                            </div>
                            <div class="subItem fbc">
                                <span class="lable">右边距</span>
                                <el-input v-model="state.pageSet.right" @change="rightNumberCheck"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="signEdit">
                    <div class="title">打印签名栏编辑</div>
                    <div class="content ">
                        <div class="item">
                            <el-input v-model="item.text" v-for="(item, index) in state.signData" :key="index"></el-input>
                        </div>
                        <span>提供4列签名栏，填写需要显示的签名信息或者自定义信息</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel option">
            <div class="title">打印内容选项</div>
            <div class="content ">
                <div class="item" v-for="(item, index) in state.tableTitle" :key="index">
                    <el-checkbox @change="checkboxFn(item)" v-model="item.show">{{ item.title }}</el-checkbox>
                </div>
            </div>
        </div>
        <div class="panel table">
          <el-table
      ref="xGrid"
        :data="state.tableData"
        stripe 
        border
        row-key="id"
        style="width: 100%;"
        height="200px"
      >
        <el-table-column
          v-for="(item, index) in tableheads_show"
          :width="item.width ? item.width : ''"
          :key="index"
          :prop="item.field"
          :label="item.title"
          show-overflow-tooltip
        >
 <!-- 预约管理-预约模式 -->
          <template v-if="item.field === 'appointmentType'" #default="{ row }">
            {{
              row.appointmentType == 0
                ? "单次播放"
                : row.appointmentType == 1
                ? "每天播放"
                : row.appointmentType == 2
                ? "每周播放"
                : row.appointmentType == 3
                ? "每月播放"
                : row.appointmentType == 4
                ? "循环播放"
                : ""
            }}
          </template>
          <!-- 预约管理-播放模式 -->
          <template v-if="item.field === 'playType'" #default="{ row }">
            {{ row.playType == 0 ? "计次" : row.playType == 1 ? "计时" : "" }}
          </template>
          <!-- 预约管理-次数/时长 -->
          <template v-if="item.field === 'playCount'" #default="{ row }">
            {{
              row.playType == 0
                ? row.playCount + "次"
                : row.playCount == 1
                ? row.playCount + "分钟"
                : ""
            }}
          </template>
          <!-- 预约管理-运行状态 -->
          <template
            #default="{ row }"
            v-if="
              router.currentRoute.value.fullPath == '/yygl' &&
              item.field == 'triggerStatus'
            "
          >
            <span
              :style="{ color: row.triggerStatus == 0 ? 'red' : '#409EFF' }"
              >{{ row.triggerStatus == 0 ? "停止" : "开始" }}</span
            >
          </template>
          <!-- 呼叫记录-是否接听 -->
          <template
            v-if="title == '呼叫记录' && item.field === 'status'"
            #default="{ row }"
          >
            {{ row.status == 1 ? "已接" : row.status == 0 ? "未接" : "" }}
          </template>
        </el-table-column>
      </el-table>
        </div>
        <div style="margin: 20px 0 ;text-align: right;">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="closeFn">
                返回
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";
let router = useRouter();
const { proxy } = getCurrentInstance();
const props = defineProps({
    printSetData: {
        type: Object,
    },
    state2: {
        type: Object,
        default: () => {
            return {
                tableTitle: [],
                tableData: [],
                fontSet: [],
                signData: [],
                titleSet: [],
                pageSet: {},
            }
        }
    },
    guangboSelect:{
    default: () => [],
  }
})
const emit = defineEmits(['closeFn','cancleFn','titleShowFn'])
props.state2.tableTitle.forEach(item => {
    item.show = item.show == 1 ? true : false
})

let state = props.state2
function checkboxFn(item){
console.log(item);
console.log(state.tableTitle);
emit('titleShowFn',state.tableTitle)
}
const route = useRoute();
function getPhone(TerminalID) {
  let phone = ''
  if (TerminalID) {
   props.guangboSelect.forEach((item) => {
      if (item.value == TerminalID) {
        phone = item.label
      }
    })
    return phone
  }
}
let tableheads_show = computed(() => {
    // return localStorage.getItem(`${route.path}_tableContent`)?JSON.parse(localStorage.getItem(`${route.path}_tableContent`)).filter(i => i.show === 1): props.tableheads.filter(i => i.show === 1)
    return state.tableTitle.filter(i => i.show == true||i.show==1)
})
function save() {
    state.tableTitle.forEach(item => {
        item.show = item.show == true ? 1 : 0
    })
    // emit('save')
    let { pageSet } = state;
    for (const key in pageSet) {
        if (Object.hasOwnProperty.call(pageSet, key)) {
            const element = pageSet[key];
            if (element == '') {
                ElMessage({
                    type: "error",
                    grouping: true,
                    message: `边距不能为空`,
                });
                return
            } else {
                localStorage.setItem(`${route.path}_printSet`, JSON.stringify(state))
            }
        }
    }
    cancleFn()
}
function cancleFn() {
    emit('cancleFn')
}
function closeFn(){
    emit('closeFn')
}
const options1 = [{ label: '仿宋', value: '仿宋_GB2312' }, { label: '雅黑', value: '微软雅黑' }, { label: '宋体', value: '新宋体' }];
const options2 = [{ label: '二号', value: '22px' }, { label: '小四', value: '12px' }, { label: '12.5', value: '12.5px' }, { label: '16', value: '16px' }, { label: '五号', value: '10.5px' }];
const options3 = [{ label: '居中', value: 'center' }, { label: '靠左', value: 'left' }, { label: '靠右', value: 'right' }];
const options4 = [{ id: 0, label: 'A4竖版', direction: 'portrait', size: 'a4' }, { id: 1, label: 'A4横版', direction: 'landscape', size: 'a4' }, { id: 2, label: 'A3竖版', direction: 'portrait', size: 'a3' }, { id: 3, label: 'A3横版', direction: 'landscape', size: 'a3' }];
defineExpose({ state, save })
const regxNum = (e, filed) => {
    const regex = /^[0-9]\d*(\.\d+)?$/;
    if (!regex?.test(e)) {
        ElMessage({
            type: "error",
            grouping: true,
            message: `请输入纯数字`,
        });
        state.pageSet[filed] = '';
        return false
    }
}
const topNumberCheck = (e) => {
    regxNum(e, 'top')
}
const rightNumberCheck = (e) => {
    regxNum(e, 'right')
}
const bottomNumberCheck = (e) => {
    regxNum(e, 'bottom')
}
const leftNumberCheck = (e) => {
    regxNum(e, 'left')
}
//设置时间格式
const changeLable = (a, b, c, d) => {
    return dateTimeFormater(c)
}
//日期格式化
const dateTimeFormater = (c) => {
    const regex = /.*\d{4}-\d{2}-\d{2}T.*/;
    if (regex?.test(c)) {
        const formattedStr = proxy.formatDate(c);
        return formattedStr
    } else {
        return c
    }
}
function timediff(begin_time, end_time) {//计算时间差
    //年月日时分秒转换为时间戳
    let beginTime = (new Date(begin_time).getTime()) / 1000;
    let endTime = (new Date(end_time).getTime()) / 1000;
    var starttime = ''
    var endtime = ''
    if (beginTime < endTime) {
        starttime = beginTime;
        endtime = endTime;
    } else {
        starttime = endTime;
        endtime = beginTime;
    }
    //计算天数
    var timediff = endtime - starttime;
    var days = parseInt(timediff / 86400);
    //计算小时数
    var remain = timediff % 86400;
    var hours = parseInt(remain / 3600);
    var res2 = parseInt(remain / 60);
    //计算分钟数
    var remain = remain % 3600;
    var mins = parseInt(remain / 60);
    // var res = days + '天' + hours + '时' + mins + '分';
    var res = res2 + '分钟';
    return res;
}
onMounted(() => {
    console.log(state, 'print-state');
    console.log(props.state2, 'print-state2');
    let localPrintSet = localStorage.getItem(`${route.path}_printSet`);
    if (!localPrintSet) return
    const { fontSet, pageSet, signData, titleSet, tableTitle, tableData } = JSON.parse(localPrintSet);
    state.fontSet = fontSet;
    state.pageSet = pageSet;
    state.signData = signData;
    state.titleSet = titleSet;
})
</script>
<style scoped lang="scss">
.left_layout {
    .fontSet {
        // :deep(.el-input) {
        //     width: 96px;
        //     height: 24px;
        // }

        // :deep(.el-input__inner) {
        //     width: 96px;
        //     height: 24px;
        // }
        :deep(.el-input__wrapper){
             width: 96px;
            height: 24px;
        }
    }


}

.right_layout {
    // :deep(.el-input) {
    //     width: 176px;
    // }

    // :deep(.el-input__inner) {
    //     width: 176px;
    // }
     :deep(.el-input__wrapper){
             width: 96px;
            height: 24px;
        }
    .page_padding {

        // :deep(.el-input) {
        //     width: 54px !important;
        // }

        // :deep(.el-input__inner) {
        //     width: 54px !important;
        // }
             :deep(.el-input__wrapper){
             width: 54px;
        }
    }

    .signEdit {

        // :deep(.el-input) {
        //     width: 102px !important;
        //     height: 24px;

        // }

        // :deep(.el-input__inner) {
        //     width: 102px !important;
        //     height: 24px;
        // }
                   :deep(.el-input__wrapper){
            width: 102px !important;
            height: 24px;
        }

    }

}

.main {
    width: 100%;
    height: 100%;

    .lable {
        flex: 1 0 auto;
    }

    .publicSet {
        margin-left: 20px;
    }

    .panel {
        width: 100%;
        margin-top: 10px;
        display: flex;
        font-size: 12px;

        .title {
            font-size: 16px;
            font-weight: 700;
            margin: 0 0 15px 0;
        }

        .item {
            margin-bottom: 10px;

            .name {
                width: 50px;
            }

            .subItem {
                .lable {
                    margin-right: 10px;
                }

                // margin-bottom: 10px;
            }
        }
    }

    .set {
        margin-top: 0;
        width: 1074px;
        overflow: hidden;
        padding: 20px;

        .left_layout {
            width: 510px;
            height: 100%;



            .subItem:nth-child(1) {
                font-size: 12px;
                font-weight: 400;
                width: 40px;
            }

            .fontSet {
                margin-bottom: 20px;
            }

            .titleSet {
                .lable {
                    width: 60px;
                    margin-right: 10px;
                }
            }

        }

        .right_layout {
            width: 480px;
            height: 100%;

            .pageSet {
                margin-bottom: 20px;

                .subItem {
                    .lable {
                        width: 48px;
                        text-align: right;
                    }
                }
            }

            .signEdit {
                .content {
                    .item {
                        margin: 0;
                        display: grid;
                        grid-auto-flow: column;
                        /* 排序方式： column-先列后行， row-先行后列 */
                        grid-template-columns: repeat(4, 115px);
                        /* 设计列宽 */
                        grid-template-rows: repeat(2, 30px);
                        /* 设计行高 */
                        grid-row-gap: 10px;
                        grid-column-gap: 10px;
                        /* 行间距 */
                        text-align: left;

                    }
                }

            }

        }
    }

    .option {
        padding: 20px;
        display: inline-block;

        .content {
            display: flex;
            flex-wrap: wrap;

            .item {
                margin: 0;
                width: 125px;
            }
        }
    }

    .table {
        height: 240px;

    }
}
</style>